前面介紹過 forEach() 處理方法，今天我們要來介紹許多人覺得好用的 map() 方法。

Array.prototype.map()

為什麼現在更多人喜歡使用 map() 呢，主要是因為以下特點：

1. 能將原始陣列運算後，重新組合回傳一個新陣列
2. 不會影響到原陣列
3. 回傳數量等於原始陣列的長度
4. 如果不回傳則是 undefined

看到了嗎？ map() 重新組合回傳一個新陣列、不會影響到原陣列

前述提到的 forEach() 在處理陣列時會修改到原本的陣列，且 forEach() 使用 return 並不會回傳任何東西；而 map() 則是在處理完後將新的值組成一個新的陣列並回傳。

map()語法結構

const newArr = arr.map(function (item, index, array){
    //...
})

跟 forEach() 很像，一樣使用回調函式 (callback) 與三個參數，後面兩個參數index 跟 array 可以自行選擇要不要加入。

不同的是 map() 最後會回傳一個所有元素皆為回調函式運算結果的新陣列，所以需要賦予到一個新的變數進去。

可以用來對資料做運算

const aArray = [2,4,6,8,10];
const newArr = aArray.map(function (item, index, array){
    return item * item;
})

console.log(newArr); // (5)[4, 16, 36, 64, 100] 經過函式內的計算並將新值各自放到新的陣列
console.log(aArray); // (5)[2, 4, 6, 8, 10] 舊陣列不受影響

也可以對資料進行比較

const aArray = [2,4,6,8,10];
const newArr = aArray.map(function (item, index, array){
    return item > 6;
})

console.log(newArr); // (5)[false, false, false, true, true]
console.log(aArray); // (5)[2, 4, 6, 8, 10]

如果沒有回傳 return 的話則會顯示 undefined

const aArray = [2,4,6,8,10];
const newArr = aArray.map(function (item, index, array){
   // return item > 6;
})

console.log(newArr); // (5)[undefined, undefined, undefined, undefined, undefined]

Array.prototype.filter()

filter() 是篩選、過濾的意思，特點如下：

1. 篩選出符合條件的內容，組合後回傳一個新陣列
2. 不會影響到原陣列

filter() 使用一個回調函式 (callback) 傳入參數，將舊陣列的每個值依序進行條件比對，篩選出符合條件 ( 回傳值為 true ) 的值後，與 map() 一樣會回傳到新的陣列。

const aArray = [5, 15, 25, 55, 100, 215]

const newArr = aArray.filter(function (item, index, array){
        return item > 50
    })

console.log(newArr) // (3)[55, 100, 215] 篩選出符合大於 50 的值並放到新的陣列
console.log(aArray) // (6)[5, 15, 25, 55, 100, 215] 舊陣列不受影響

相較於 map() 比較過後是回傳布林值，filter() 則更進一步地將比較完後將布林值為 true 的值依序拉出來放到新的陣列，自動篩選出我們想要得到的資訊。

因為篩選的特性，filter() 常常可以用在例如比價網、選擇地區的下拉選單、判斷哪些地方的氣溫有超標等等的場景，跟 map() 是現在非常常被使用的方法之一。

const degreeData = [
    {
        area : "台北市",
        degree : 33.8 
    },
    {
        area : "台中市",
        degree : 35.5 
    },
    {
        area : "高雄市",
        degree : 36.8 
    },
    {
        area : "花蓮",
        degree : 35 
    },
]

const newData = degreeData.filter(function(item, index, array){
    return item.degree >= 35;
})

console.log(newData); 
// (3) [{…}, {…}, {…}]
// 0: {area: '台中市', degree: 35.5}
// 1: {area: '高雄市', degree: 36.8}
// 2: {area: '花蓮', degree: 35}
// length: 3
// [[Prototype]]: Array(0)

參考資料

線上課程
MDN
卡斯伯：JavaScript 陣列處理方法 [filter(), find(), forEach(), map(), every(), some(), reduce()]